<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lora上行数据查看</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

    <style type="text/css">
        .timeClass{
            padding: 5px;
            height: 14px;
            font-size: 14px;
        }
        .dataClass{
            padding: 5px;
            font-size: 16px;
            background-color: lightcyan;
        }
    </style>
</head>
<body>
<h2>lora上行数据查看</h2>
<div>
    <select id="topN" class="selectClass">
        <option value="10">查看最新的10条数据</option>
        <option value="50" selected>查看最新的50条数据</option>
        <option value="100">查看最新的100条数据</option>
        <option value="500">查看最新的500条数据</option>
        <option value="0">查看所有的数据</option>
    </select>
</div>

<div id="list">

</div>

<script type="text/javascript">

    var intervalIndex = setInterval(function () {
        getdata();
    },2000);

    function getdata() {
        $.ajax({
            url: "/api/updata/list",
            type: "post",
            dataType: "json",
            data: {topN: $("#topN").val()},
            success: function ( result ) {
                console.log(result);
                if (result.code == 0) {
                    var str = "";
                    var list = result.data;
                    for (var i in list) {
                        str += `
                            <div class="timeClass">`+list[i].createtime+`</div>
                            <div class="dataClass">`+list[i].data+`</div>
                        `;
                    }

                    $('#list').html(str);
                }
            },error: function(result){
                console.log(result);
            }
        });
    }

</script>
</body>
</html>